<script lang="ts" setup>
import { ref, watch, defineEmits, defineProps } from 'vue'

const props = defineProps({
  modelValue: Boolean,
})

const emit = defineEmits(['update:modelValue'])

// 创建本地响应变量
const localShow = ref(props.modelValue)

// 监听 prop 变化同步到本地
watch(
  () => props.modelValue,
  (newVal) => {
    localShow.value = newVal
  },
)

// 本地值变化时通知父组件
watch(localShow, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>

<template>
  <view class="pop-price-info">
    <wd-popup v-model="localShow" position="bottom" custom-style="border-radius:32rpx;">
      <text class="custom-txt">弹弹弹</text>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
.pop-price-info {
  z-index: 998;
}
</style>
